import { useState } from 'react';
import './SymptomCheckMethod.css';
import SymptomInput from './SymptomInput';

const SymptomCheckMethod = () => {
  // 状态变量，用于跟踪用户选择的检查方式
  const [selectedMethod, setSelectedMethod] = useState(null);
  // 状态变量，用于控制是否显示症状输入页面
  const [showSymptomInput, setShowSymptomInput] = useState(false);
  
  // 处理选项点击事件
  const handleMethodSelect = (method) => {
    // 更新当前选择的检查方式
    setSelectedMethod(method);
  };
  
  // 处理下一步按钮点击事件
  const handleNextStep = () => {
    // 如果用户选择了检查方式，则跳转到下一个页面
    if (selectedMethod) {
      console.log(`选择了${selectedMethod}方式进行检查`);
      // 显示症状输入页面
      setShowSymptomInput(true);
    }
  };

  // 根据状态决定显示哪个页面
  return showSymptomInput ? (
    // 如果需要显示症状输入页面，就渲染SymptomInput组件
    <SymptomInput />
  ) : (
    // 否则显示检查方式选择页面
    <div className="method-container">
      {/* 顶部状态栏 */}
      <div className="status-bar">
        <span className="time">9:41</span>
        <div className="icons">
          <span className="signal">●●●●</span>
          <span className="wifi">●</span>
          <span className="battery">●</span>
        </div>
      </div>
      
      {/* 进度指示器 */}
      <div className="progress-indicator">
        <div className="step active">
          <div className="dot"></div>
          <div className="label">步骤</div>
        </div>
        <div className="step-line"></div>
        <div className="step">
          <div className="dot"></div>
        </div>
        <div className="step-line"></div>
        <div className="step">
          <div className="dot"></div>
        </div>
      </div>
      
      {/* 页面标题 */}
      <div className="page-title">
        <h2>您希望如何检查</h2>
        <h2>您的症状?</h2>
      </div>
      
      {/* 选项卡片容器 */}
      <div className="options-container">
        {/* 手动数据输入选项 */}
        <div 
          className={`option-card ${selectedMethod === 'manual' ? 'selected' : ''}`} 
          onClick={() => handleMethodSelect('manual')}
        >
          <div className="option-icon">📝</div>
          <div className="option-content">
            <h3>手动数据输入</h3>
            <p>手动输入您的想法，让我们的人工智能决定结果。</p>
          </div>
        </div>
        
        {/* 与AI聊天选项 */}
        <div 
          className={`option-card ${selectedMethod === 'chat' ? 'selected' : ''}`}
          onClick={() => handleMethodSelect('chat')}
        >
          <div className="option-icon">💬</div>
          <div className="option-content">
            <h3>与人工智能聊天机器人</h3>
            <p>使用最新、最强大的模型与我们的人工智能聊天机器人交谈，以发现您的症状。</p>
          </div>
        </div>
      </div>
      
      {/* 下一步按钮 */}
      <button 
        className={`next-button ${selectedMethod ? 'active' : ''}`}
        onClick={handleNextStep}
        disabled={!selectedMethod}
      >
        下一步 ›
      </button>
    </div>
  );
};

export default SymptomCheckMethod; 